React = require 'react'
ReactDOM = require 'react-dom'
injectTapEventPlugin = require 'react-tap-event-plugin'

injectTapEventPlugin()

AppBar = require 'material-ui/lib/app-bar'
IconButton = require 'material-ui/lib/icon-button'
FlatButton = require 'material-ui/lib/flat-button'
IconMenu = require 'material-ui/lib/menus/icon-menu'
MenuItem = require 'material-ui/lib/menus/menu-item'

#NavigationClose = require 'material-ui/lib/svg-icons/navigation/close'
Icons = require 'material-ui/lib/svg-icons'

AppBar1 = React.createClass
  render: ->
    <AppBar title='Title' iconClassNameRight='muidocs-icon-navigation-expand-more'/>

AppBar2 = React.createClass
  render: ->
    <AppBar title={<span>Title</span>}
       iconElementLeft={<IconButton><Icons.NavigationClose/></IconButton>}
       iconElementRight={<FlatButton label='Save' />} />

AppBar3 = React.createClass
  render: ->
    menu = <IconMenu iconButtonElement={<IconButton><Icons.NavigationMoreVert /></IconButton>}>
        <MenuItem primaryText="Refresh" />
        <MenuItem primaryText="Help" />
        <MenuItem primaryText="Sign out" />
      </IconMenu>
    <AppBar title="Title"
      iconElementLeft={<IconButton><Icons.NavigationClose/></IconButton>}
      iconElementRight={menu} />

AppBarDemo = React.createClass
  render: ->
    <div>
      <AppBar1 />
      <br/>
      <AppBar2 />
      <br/>
      <AppBar3 />
    </div>

ReactDOM.render <AppBarDemo/>, document.getElementById('root')
